import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Card, Empty } from 'antd-mobile'
import './Coupon.less'
import { fliterTime } from '../../filters'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getArr, showCoupon, getN } from '../../store/modules/coupon'

class Coupon extends Component {
  render() {
    let { coupon, n, arr,couponFn:{changeN} } = this.props;
    console.log(arr)
    return (
      <div className='coupon'>
        <Header title='优惠券' back></Header>
        <div className='nav'>
          {arr.map((item, index) => {
            return <div key={index}><span className={index == n ? 'active' : ''} onClick={() =>changeN(index)}>{item}</span></div>
          })}
        </div>
        {coupon.length > 0 ?
          <div>
            {coupon.map((i, ind) => {
              return <Card key={i.id} title={<div className='content' >
                <div className='money'>
                  ￥<i>{i.money}</i>
                  <p>满{i.limit_money}元可用</p>
                </div>
                <div className='desc'>
                  <h4>{i.title}</h4>
                  <p>{fliterTime(i.begintime)} 至 {fliterTime(i.endtime)}</p>
                </div>
              </div>} >
                <p className='text'>使用规则：{i.description}</p>
              </Card>
            })}</div> : <Empty description='暂无数据' />}

      </div>
    )
  }
  componentDidMount() {
    this.props.couponFn.requestCoupon()
  }

}

// 取数据
const mapStateToProps = state => {
  return {
    coupon: showCoupon(state),
    n: getN(state),
    arr: getArr(state)
  }
}
// 取方法
const mapDispatchToProps = dispatch => {
  return {
    couponFn: bindActionCreators(actions, dispatch)
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Coupon)
